<template>
  <div class="custom-style">
    <div class="segmented-container">
      <el-segmented id="segmented" v-model="activeName" :options="options" @change="handleClick"/>
    </div>
      <table1 v-if="activeName == 'first'"></table1>

    <!-- <el-tabs v-model="activeName" class="top-tabs" @tab-click="handleClick">
    <el-tab-pane label="运营商订单" name="first">
      <table1></table1>
    </el-tab-pane>
    <el-tab-pane label="车辆机构订单" name="second">车辆机构订单</el-tab-pane>
    <el-tab-pane label="运营商占用订单" name="third">运营商占用订单</el-tab-pane>
  </el-tabs> -->

  </div>
</template>

<script setup>
import table1 from "./components/table1.vue";
const options = ref([
  { label: '运营商订单', value: 'first' },
  { label: '车辆机构订单', value: 'second' },
  { label: '运营商占用订单', value: 'third' },
])
const activeName = ref('first')
const handleClick = (val) => {
  activeName.value = val
}
onMounted(() => {
});
</script>

<style lang="scss" scoped>
.segmented-container{
  background-color: #F7FAFF;
    height: 100px;
    position: fixed;
    right: 50px;
    left: 300px;
}
.custom-style .el-segmented {
  position: fixed;
  --el-segmented-item-selected-color: #333;
  --el-segmented-item-selected-bg-color: #F7FAFF;
  --el-segmented-item-hover-bg-color:#F7FAFF;
  --el-segmented-item-selected-bg-color: #F7FAFF;
  --el-segmented-item-active-bg-color:#F7FAFF;
  background-color: #F7FAFF;

}
:deep(#segmented .el-segmented__item-label){
  font-size: 18px;
  color: $main-color;
}
:deep(#segmented .el-segmented__item){
  border-bottom: 2px solid #F7FAFF;
  padding: 0px 0px 10px 0px;
  margin-right: 20px;
}
:deep(#segmented .el-segmented__item.is-selected){
  border-bottom: 2px solid #F04142;
}
:deep(#segmented .el-segmented__item:hover){
  border-bottom: 2px solid #F04142;
}
// :deep(.el-tabs__item.is-active){
//   color: #333;
// }
// :deep(.el-tabs__item){
//   font-size: 18px;
//   color: #333;
// }
// :deep(.el-tabs__nav-wrap::after){
//   background-color: rgba(255,255,255,0);
// }
// :deep(.el-tabs__active-bar){
//   background-color: #F04142;
// }

</style>
